<template>
  <div>
    <el-form-item
      :rules="item.rules"
      :label="item.label + '：'"
      :prop="item.prop"
      :ref="item.prop"
    >
      <!-- input -->
      <el-input
        v-if="item.type === 'input'"
        v-bind="$attrs"
        v-on="$listeners"
        :type="item.subtype"
        :placeholder="item.placeholder"
        :disabled="item.disable"
        :readonly="item.readonly"
        :autosize="item.autosize"
      ></el-input>
      <!-- select -->
      <el-select
        v-if="item.type === 'select'"
        v-bind="$attrs"
        v-on="$listeners"
        :placeholder="item.placeholder || '请选择'"
      >
        <el-option
          v-for="(s, si) in item.options"
          :key="si"
          :label="s.label"
          :value="s.value"
        >
        </el-option>
      </el-select>
      <!-- img -->
      <div v-if="item.type == 'img'">
        <uploadImg v-if="!otherValue" @success="success" @prop="clearRules" :propType="item.prop"></uploadImg>
        <div class="poser" v-else>
          <div class="master">
            <div class="w-100 h-100 flex-ali" @click="clearImg">
              <i class="el-icon-delete"></i>
            </div>
          </div>
          <img class="avatar" :src="otherValue" />
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import uploadImg from "@/components/UploadImg";
export default {
  name: "vae-form",
  components: { uploadImg },
  props: {
    item: {
      type: Object,
      required: true,
    },
    otherValue: {},
  },
  data() {
    return {
      imgUrl: "",
    };
  },
  methods: {
    success(res) {
      this.imgUrl = res;
      this.$emit("input", res);
    },
    clearRules(prop) {
      this.$refs[prop].clearValidate()
    },
    // 清除图片
    clearImg() {
      this.$emit("input", '');
      this.imgUrl = ''
    }
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.poser {
  position: relative;
  .master {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 66;
  }
  &:hover .master {
    display: block;
    color: white;
    font-size: 24px;
  }
}
</style>